<template>
  <div>
    <el-image
      style="width:25px;height:25px;margin: 2px 3px"
      :src="explain.iconUrl"
      fit="fit"
      @click.stop="iconClick"
    >
      <div slot="error" class="image-slot">
        <i
          class="el-icon-picture-outline"
          style="width:25px;height:25px;margin: 5px"
          @click.stop="iconClick"
        />
      </div>
    </el-image>

    <el-dialog
      :visible.sync="dialogIconFormVisible"
    >
      <div>
        <el-image
          v-for="(item,index) in iconList"
          :key="index"
          style="margin-left: 4px;cursor: pointer;width: 40px;height: 40px;margin: 5px"
          :src="item.url"
          @click="changeIco(item.url,200145308)"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listSensorIcon } from '@/api/iot/iotDeviceSensorApi'
import {
  updateExplain
} from '@/api/iot/iotDeviceExplainApi'
export default {
  name: 'DeviceExplainIcon',
  props: {
    explain: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      iconList: [],
      dialogIconFormVisible: false
    }
  }, created() {

  },
  methods: {
    changeIco(iconUrl) {
      updateExplain({
        explainId: this.explain.explainId,
        iconUrl: iconUrl
      }).then(() => {
        this.dialogIconFormVisible = false
        this.explain.iconUrl = iconUrl
      })
    },
    iconClick() {
      this.listSensorIcon()
    },
    listSensorIcon() {
      listSensorIcon({
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.iconList = data
          this.dialogIconFormVisible = true
        }
      })
    }
  }
}
</script>

